<template>
  <div class="quesition-template">
    <!-- 单选题 -->
    <SingleChoiceQuestion v-if="examStore.currQuestion.type == 1 || examStore.currQuestion.type == 2" />

    <!-- 多选题 -->
    <MultipleChoice v-if="examStore.currQuestion.type == 3" />

    <!-- 数字填空题 -->
    <gREFillInTheBlanksQuestions v-if="examStore.currQuestion.type == 4" />

    <!-- 写作题 -->
    <gREShortAnswerQuestions
      v-if="examStore.currQuestion.type == 5"
      :left-content="''"
      :initial-answer="'hjdhjfsdf'"
      @tool-click="handleToolClick"
      @update:answer="handleAnswerUpdate"
    />

    <!-- 段中点选 -->
    <SegementSelection v-if="examStore.currQuestion.type == 8" />

    <!-- 图形图表---判断单选 -->
    <d1TwoSubtopicQuestion
      v-if="examStore.currQuestion.type == 9"
      :left-content="'<p> Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>'"
      :question-title="'题干：直接细节题：正确答案为(E)。根据题干关键词whig propaganda在第二段定位...'"
      :headers="['(1)', '(2)']"
      :options="[
        { text: '原文没有提到女性应该享有更多政治权利。' },
        { text: '原文没有提到女性应该享有更多政治权利。' },
        { text: '原文没有提到女性应该享有更多政治权利。' },
        { text: '原文没有提到女性应该享有更多政治权利。' },
      ]"
      :correct-answers="[0, 1]"
      :is-analysis="false"
      @update:answers="handleAnswerUpdate"
    />

    <!-- <MaterialAnalysis v-if="examStore.currQuestion.type == 6 || examStore.currQuestion.type == 7" /> -->
    <!-- <subtopicSingleChoiceQuestionCR  :materials="materials" ></subtopicSingleChoiceQuestionCR> -->
    <d1-graphic-chart-question
      v-if="examStore.currQuestion.type == 10"
      :left-content="''"
      :question-groups="questionGroups"
      :is-analysis="true"
      :correct-answers="correctAnswers"
      :user-answer-list="userAnswers"
      @update:answers="handleAnswerUpdate"
    />

    <!-- <gREMultipleChoice
      :questions="{
        content:
          '<p>请选择正确的选项Lorem ipsum  felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.Lorem ipsum  felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.：</p>',
        list: [{ text: '选项1' }, { text: '选项2' }, { text: '选项3' }],
      }"
      :left-content="'<p>Lorem ipsum  felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.</p>'"
      :is-analysis="false"
      :correct-answers="[
        { yes: true, no: false },
        { yes: false, no: true },
        { yes: true, no: false },
      ]"
      @update:answers="handleAnswerUpdate"
    /> -->
    <!-- <gREMultipleChoiceFillInTheBlanks
      :questions="{
        content:
          '<p>orem ipsusmod bibendum9  (i)__________  laoreet. Proin gravida dolor sit amet lacuarturient  (ii)__________   montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.Lorem ipsum dolor sit amet, con, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales  (iii)__________   pulvinar sic tempor.</p>',
        groups: [
          {
            options: [
              { label: 'A', text: 'Energy' },
              { label: 'B', text: 'Energy' },
              { label: 'C', text: 'Energy' },
            ],
          },
          {
            options: [
              { label: 'D', text: 'Energy' },
              { label: 'E', text: 'Energy' },
              { label: 'F', text: 'Energy' },
            ],
          },
          {
            options: [
              { label: 'G', text: 'Energy' },
              { label: 'H', text: 'Energy' },
              { label: 'I', text: 'Energy' },
            ],
          },
        ],
      }"
      :left-content="'<p>sahfjdhuhweuruweuyruwe</p>'"
      :is-analysis="true"
      :correct-answers="[0, 1, 2]"
      @update:answers="handleAnswerUpdate"
    /> -->
    <!-- <gRESingleChoice
      :question="questionData"
      :isAnalysis="showAnalysis"
      @answer-selected="handleAnswerSelected"
    /> -->
  </div>
</template>

<script setup>
import { ref } from "vue";
import SingleChoiceQuestion from "./singleChoiceQuestion.vue";
import MultipleChoice from "./multipleChoice.vue";
import MaterialAnalysis from "./materialAnalysis.vue";
import subtopicSingleChoiceQuestionCR from "./subtopicSingleChoiceQuestionCR.vue";
import d1GraphicChartQuestion from "./d1GraphicChartQuestion.vue";
import d1TwoSubtopicQuestion from "./dITwo-stageAnalysis.vue";
import gREMultipleChoiceFillInTheBlanks from "./Re/gREMultipleChoiceFillInTheBlanks.vue";
import gRESingleChoice from "./Re/gRESingleChoice.vue";
import gREMultipleChoice from "./Re/gREMultipleChoice.vue";
import gREShortAnswerQuestions from "./Re/gREShortAnswerQuestions.vue";
import gREFillInTheBlanksQuestions from "./Re/gREFillInTheBlankQuestions.vue";
import SegementSelection from "./segementSelection.vue";
import { useExam } from "@/stores/exam.js";
const examStore = useExam();
const showAnalysis = ref(false); // 是否展示解析
const userAnswers = ref([]);
const questionData = {
  title:
    "直接细节题：正确答案为(E)。根据题干关键词whig propaganda在第二段定位。原文通过gathered、reminded、and conferred的平行并列结构说明了出席whig党集会的女性可以为whig带来什么，而(E)项正是conferred部分的同义改写。",
  options: [
    {
      value: "A",
      label: "原文没有提到女性应该享有更多政治权利。",
    },
    {
      value: "B",
      label: "原文没有提到女性应该享有更多政治权利。",
    },
    {
      value: "C",
      label: "原文没有提到女性应该享有更多政治权利。",
    },
    {
      value: "D",
      label: "原文没有提到女性应该享有更多政治权利。",
    },
    {
      value: "E",
      label: "原文没有提到女性应该享有更多政治权利。",
    },
  ],
  selectValue: "A",
  correctAnswer: "E",
};

const handleAnswerSelected = (answer) => {
  console.log("Selected answer:", answer);
  // 处理答案选择逻辑
};
const questionGroups = [
  {
    content:
      "<p>根据题干关键词whig propaganda在第二段定位。原文通过gathered、reminded、and conferred的平行并列结构说明了出席whig党集会的女性可以为whig带来什么</p>",
    options: [
      { label: "选项1", value: "1" },
      { label: "选项2", value: "2" },
    ],
  },
  {
    content: "<p>而(E)项正是conferred部分的同义改写</p>",
    options: [
      { label: "选项A", value: "A" },
      { label: "选项B", value: "B" },
    ],
  },
  {
    content: "<p>第三段的内容分析</p>",
    options: [
      { label: "选项X", value: "X" },
      { label: "选项Y", value: "Y" },
    ],
  },
];

const correctAnswers = ["1", "A", "X"];

const handleAnswerUpdate = (answers) => {
  userAnswers.value = answers;
  console.log("Updated answers:", answers);
};
</script>
<style lang="scss" scoped>
.quesition-template {
  padding: 20px;
}
</style>
